<template>
  <view>
    <view class="withdrawRecordMain">
      <u-sticky :enable = "enable">
        <view class="wrTotalMoney">
          <view
            >提现成功总金额（元）：<text>{{ $tools.format(successTm) }}</text></view
          >
          <view
            >提现成功总笔数（笔）：<text>{{ $tools.format(successTc) }}</text></view
          >
        </view>
      </u-sticky>
      <view v-if="list.length > 0">
        <view
          class="withdrawRecordItem"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="topPart flex align-center justify-between">
            <text>{{ item.order_no }}</text>
            <view>
              ￥<text>{{$tools.format(item.money) }}</text>
            </view>
          </view>
          <view class="line"></view>
          <view class="bottomPart">
            <view class="partLeft" style="padding-bottom: 20rpx">
              <view>
                <image
                  src="../../static/images/time.png"
                  mode="widthFix"
                ></image>
                <text>申请时间</text>
              </view>
              <text>{{ item.apply_date }} {{ item.apply_time }}</text>
            </view>
            <view class="partLeft" style="padding-bottom: 20rpx">
              <view>
                <image
                  src="../../static/images/label.png"
                  mode="widthFix"
                ></image>
                <text>提现类型</text>
              </view>
              <text>{{ item.type == 1?'返现提现':'分润提现' }}</text>
            </view>
			<view class="partLeft">
			  <view>
			    <image
			      src="../../static/images/status.png"
			      mode="widthFix"
			    ></image>
			    <text>申请状态</text>
			  </view>
			  <text style="font-weight: 700" :style="{ color: color[item.status] }">{{ isSuccess[item.status] }}</text>
			</view>
          </view>
        </view>
      </view>
      <!-- 暂无数据 -->
      <view class="noMachine" v-if="list.length == 0 && isLoad">
        <image
          src="../../static/images/noData/zwtd.png"
          mode="widthFix"
        ></image>
        <text>暂无提现记录</text>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-toast ref="uToast" />
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      style="padding: 30rpx 0 30upx"
      v-if="list.length > 0"
    />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enable:true,
      scrollTop: 0,
      page: 1,
	  pageNumber:10,
      noMore: false,
      isLoad: false,
      status: "loadmore",
      list: [],
      isSuccess: ["处理中", "代付处理中", "提现成功", "提现失败"],
      color: ["#fb9f00", "#488ff0", "#39b54a", "#e54d42"],
      successTm: "0.00",
      successTc: "0",
    };
  },
  onLoad() {
    this.listWithdrawLog();
  },
  onShow(){
    this.enable = true;
  },
  onHide(){
    this.enable = false;
  },
  methods: {
    listWithdrawLog() {
      this.$u.api
        .listWithdraw({
          page: this.page,
          limit: this.pageNumber
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1) {
              this.successTm = res.result.successTm;
              this.successTc = res.result.successTc;
            }
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.list = this.list.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    // 点击下载更多
    loadmore() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.page = ++this.page;
        this.status = "loadmore";
        this.listWithdrawLog();
      }
    },
    // 下拉触底
    onReachBottom() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.status = "loading";
        this.page = ++this.page;
        this.listWithdrawLog();
      }
    },
    onPullDownRefresh() {
      this.list = [];
      this.page = 1;
      this.noMore=false;
      this.isLoad=false;
      this.status="loadmore";
      this.listWithdrawLog();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
  },
};
</script>

<style lang="scss">
.wrTotalMoney {
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  color: white;
  font-size: 28rpx;
  padding: 10rpx 30rpx 20rpx;
  view {
    line-height: 60rpx;
  }
  text {
    font-size: 40rpx;
    font-family: numberFont;
    letter-spacing: 3rpx;
    font-weight: 700;
  }
}

.withdrawRecordItem {
  margin-top: 20rpx;
  background-color: white;

  .topPart {
    padding: 0 30rpx;
    height: 80rpx;
    font-size: 32rpx;
	font-family: din;
	letter-spacing: 2rpx;
    font-weight: 600;

    view {
      color: #488ff0;
      font-size: 28rpx;
      font-weight: bold;
      text {
        font-size: 44rpx;
      }
    }

    image {
      width: 30rpx;
    }
  }

  .line {
    width: 100%;
    height: 1rpx;
    background-color: #f4f4f4;
  }

  .bottomPart {
    padding: 20rpx 30rpx;
    .partLeft {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      color: #9c999c;
      image {
        padding: 5rpx;
        width: 36rpx;
        margin-right: 10rpx;
      }
      text {
        font-family: numberFont;
      }
      view:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

</style>
